<template>
  <div class="user">
    <div class="head">
      <img src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" alt="">
      <span>尊贵vip用户</span>
    </div>
    <ul class="proc">
      <li>
        <van-icon size="30" name="notes-o" /><br>
        <p>我的订单</p>
      </li>
      <li>
        <van-icon size="30" name="coupon-o" /><br>
        <p>优惠券</p>
      </li>
      <li>
        <van-icon size="30" name="records" /><br>
        <p>足迹</p>
      </li>
      <li>
        <van-icon size="30" name="star-o" @click="goCollect" /><br>
        <p>收藏</p>
      </li>
      <li>
        <van-icon size="30" name="location-o" @click="goAddress" /><br>
        <p>地址管理</p>
      </li>
      <li>
        <van-icon size="30" name="service-o" /><br>
        <p>客服</p>
      </li>
      <li>
        <van-icon size="30" name="question-o" /><br>
        <p>帮助中心</p>
      </li>
      <li>
        <van-icon size="30" name="edit" /><br>
        <p>意见反馈</p>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goAddress = () => {
  router.push({ name: 'addressView' })
}
const goCollect = () => {
  router.push({ name: 'collectView' })
}
</script>

<script>
export default {
  name: 'mineView'
}
</script>
<style lang="scss" scoped>
.user {
  height: 1600px;
  background-color: #F8F8F8;
  text-align: center;

  .head {
    width: 100%-10;
    height: 150px;
    padding: 86px 36px;
    background-image: linear-gradient(to bottom, black, #575757);
    margin-bottom: 30px;

    img {
      width: 150px;
      height: 150px;
      border-radius: 100%;
      float: left;
      margin-right: 36px;
    }

    span {
      display: block;
      float: left;
      font-size: 30px;
      line-height: 150px;
      color: #fff;
    }
  }

  .proc {
    width: 720px;
    height: 460px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-color: #fff;

    li {
      width: 180px;
      height: 152px;
      padding: 44px 0;
    }
  }
}
</style>
